<template>
	<div class="">
		
		<el-form :model="ruleForm" ref="ruleForm"  :label-position="labelPosition" label-width="150px" class="demo-ruleForm container">
		  <el-page-header @back="backPage" content="">
		  </el-page-header>
		    <div class="" style="margin-top:20px">
		        <el-row > 
					<el-col :span="10">
					    <el-form-item label="客户：" prop="checkName">
					        {{ruleForm.customer}}
					    </el-form-item>
					</el-col>
					<el-col :span="12">
					    <el-form-item label="联系人：" prop="checkName">
					         {{ruleForm.user}}
					    </el-form-item>
					</el-col>
					<el-col :span="10">
					    <el-form-item label="联系方式：" prop="checkName">
					        {{ruleForm.phone}}
					    </el-form-item>
					</el-col>
					<el-col :span="12">
					    <el-form-item label="详细地址：" prop="checkName">
					         {{ruleForm.address}}
					    </el-form-item>
					</el-col>
					<el-col :span="10">
					    <el-form-item label="订单来源：" prop="checkName">
					        {{ruleForm.source}}
					    </el-form-item>
					</el-col>
					<el-col :span="12">
					    <el-form-item label="交货日期：" prop="checkName">
					        {{ruleForm.deliverTime}}
					    </el-form-item>
					</el-col>
					<!-- <el-col :span="10">
					    <el-form-item label="销售日期：" prop="checkName">
					        {{}}
					    </el-form-item>
					</el-col> -->
		        </el-row>
		    </div>  
		   <!-- <el-form-item class="footerFixed">
		        <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
		        <el-button @click="backPage">返回</el-button>
		    </el-form-item> -->
		
		</el-form>
		
		<div class="container" style="margin-top:20px;">
			<h3>订单明细</h3>
			<el-table
			    :data="ruleForm.orderDetailList"
			    border
			    style="margin-top:20px;"
			    ref="multipleTable"
				:summary-method="getSummaries"
				show-summary
			    header-cell-class-name="table-header"
			>
			    <el-table-column prop="name" sortable label="产品标题"></el-table-column>
			    <el-table-column prop="price" sortable label="价格"></el-table-column>
				<el-table-column prop="number" sortable label="数量"></el-table-column>
			    <el-table-column prop="totalPrice" sortable label="小计"></el-table-column>
			</el-table>
		</div>
		<el-form :model="data" ref="ruleForm" :label-position="labelPosition" label-width="150px" style="margin-top: 20px;" class="demo-ruleForm container">
			<el-row  style="margin:20px 0 30px 0px;">
			    <h3 style="margin-bottom:20px;">财务信息</h3>
			    <el-col :span="12">
			        <el-form-item label="发票信息：">
			            {{ruleForm.invoiceType}}
			        </el-form-item>
			        <el-form-item v-show="showFormItem == 1 || showFormItem == 2" label="纳税人识别号：">
			           {{ruleForm.taxpayerNumber}}
			        </el-form-item>
			        <el-form-item v-show="showFormItem == 2" label="开户银行：">
			            {{ruleForm.bank}}
			        </el-form-item>
			        <el-form-item v-show="showFormItem == 2" label="付款情况：">
			           {{ruleForm.isPay}}
			        </el-form-item>
			        <el-form-item v-show="showFormItem == 2" label="付款金额：">
			            {{ruleForm.payAmount}}
			        </el-form-item>
			    </el-col>
			    <el-col :span="10">
			        <el-form-item v-show="showFormItem == 1 || showFormItem == 2" label="公司名称：">
			            {{ruleForm.company}}
			        </el-form-item>
			        
			        <el-form-item v-show="showFormItem == 2" label="开户名称：">
			            {{ruleForm.accountName}}
			        </el-form-item>
			        <el-form-item v-show="showFormItem == 2" label="银行账号：">
			            {{ruleForm.bankAccount}}
			        </el-form-item>
			        <el-form-item v-show="showFormItem == 2" label="付款方式：">
						{{ruleForm.payType}}
			        </el-form-item>
			    </el-col>
			</el-row>
		    <el-form-item class="footerFixed" label-width="0px">
		        <!-- <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button> -->
		        <el-button @click="backPage">返回</el-button>
		    </el-form-item>
		
		</el-form>
	</div>
</template>

<script>
	import { order_findById } from "@/request/breedApi"
	export default{
		data(){
			return{
				showFormItem:0,
				list:[],
				labelPosition:'right',
				ruleForm:{},
				id:'',
				tableData:[],
				data:{}
			}
		},
		mounted(){
			this.id = this.$route.query.id
			this.init()
		},
		methods:{
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				let values = []
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '合计';
						return;
					}
					if(column.property == "totalPrice"){
						values = data.map(item => Number(item.totalPrice))
					}
					if(column.property == "totalPrice") {
						// values = data.map(item => Number)
						sums[index] = values.reduce((prev,curr) => {
							const value = Number(curr)
							if(!isNaN(value)){
								return prev + curr
							}else{
								return prev
							}
						},0)
						sums[index]
					} else {
						sums[index] = ""
					}
				});
				this.totalMoney = sums[3]
				return sums;
			},
			init(){
				order_findById(this.id).then((res)=>{
					this.ruleForm = res.data.order
					this.ruleForm.customer = res.data.order.clientName
					this.ruleForm.user = res.data.order.salesperson
					this.ruleForm.orderDetailList = res.data.details
					console.log(this.ruleForm.orderDetailList,'4545')
					this.showSH  =true
					
					if(res.data.order.payState == 0){
						this.ruleForm.isPay = '未付款'
					}else if(res.data.order.payState == 1){
						this.ruleForm.isPay = '已付款'
					}else if(res.data.order.payState == 2){
						this.ruleForm.isPay = '已付全款'
					}

					if(res.data.order.invoiceId == '0'){
						this.ruleForm.invoiceType = '不开发票'
						this.showFormItem = 0
					}else if(res.data.invoice.type == '1'){
						this.ruleForm.invoiceType = '增值税普通发票'
						this.ruleForm.taxpayerNumber = res.data.invoice.invoiceCode
						this.ruleForm.company = res.data.invoice.invoiceRise
						this.showFormItem = 1
					}else if(res.data.invoice.type == '2'){
						this.ruleForm.invoiceType = '增值税专用发票'
						this.ruleForm.invoiceAddress = res.data.invoice.invoiceAddress
						this.ruleForm.bank = res.data.invoice.invoiceBank
						this.ruleForm.bankAccount = res.data.invoice.invoiceBankCode
						this.ruleForm.taxpayerNumber = res.data.invoice.invoiceCode
						this.ruleForm.accountName = res.data.invoice.invoiceName
						this.ruleForm.invoicePhone = res.data.invoice.invoicePhone
						this.ruleForm.company = res.data.invoice.invoiceRise
						this.ruleForm.payAmount = res.data.order.payAmount
						this.showFormItem = 2
					}
				})
			},
			backPage(){
				this.$router.go(-1)
			},
			// 提交
			submitrule(){
				
			}
		}
	}
</script>

<style scoped>
	
</style>
